<template>
<div>
    <div>
<el-page-header @back="goBack" content="数据分析"> </el-page-header></div>
 <div id="container" style="min-width:400px;height:600px"></div>
</div>
</template>

<script>
export default {
//部件
 components: {
 },
//静态
 props: {
 },
//对象内部的属性监听，也叫深度监听
 watch: {
 },
//属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
 computed: { 
 },
//方法表示一个具体的操作，主要书写业务逻辑；
 methods: {
     submitHandler() {
      // 1. 获取参数  this.form
      // 2. 将参数提交给后台
      let url = "http://39.106.31.187:8888/greenhouse/saveOrUpdate";
      post(url, this.form).then((resp) => {
        // 提示用户录入完成
        this.$message({ type: "success", message: resp.message });
        // 返回，展示
        this.goBack();
      });
    },
    goBack() {
      this.$router.back();
    }, 
   toks(){
   var chart = Highcharts.chart('container',{
    chart: {
        type: 'column'
    },
    title: {
        text: '气象变化数据分析'
    },
    subtitle: {
        text: '数据来源: 精确农业'
    },
    xAxis: {
        categories: [
            '太阳能气质识别','无人机灌溉','优良生态','温室大鹏','精准收割机','智慧翻土机','太阳能空气检测'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: '温湿度估值'
        }
    },
    tooltip: {
        // head + 每个 point + footer 拼接成完整的 table
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            borderWidth: 0
        }
    },
    series: [{
        name: '温度',
        data: [32, 23, 15, 35, 15, 29, 28.3]
    }, {
        name: '空气湿度',
        data: [30, 50, 16, 26, 60, 57, 23.5]
    }, {
        name: '土壤湿度',
        data: [18, 15, 13.5, 15.6, 20, 6, 16.9]
    }]
});
   }

 },
//请求数据
 created() {
},
 mounted() {
   this.toks()
}
}
</script>

<style scoped>

</style>